<template>
  <div>
  <div class="order-container">
    <div style="width: 100%;height: 200px;color:white;background-color:rgba(71,155,238,0.85);line-height: 200px;margin-bottom: 30px"><h1>订单查询</h1></div>
    <span class="dj" >全部</span><span class="dj1">待付款</span><span class="dj1">待使用</span>
    <span class="dj1">待评价</span><span class="dj1">退款/售后</span>

  </div>
      <div>
        <div v-for="(order, index) in tableData" :key="index">
          <div class="order-item" @click="findById(order.orderId)">
            <div class="order-dingdanName">{{ order.dingdanName }}</div>
            <div class="order-status">{{ order.orderStatus }}</div>
            <img :src="order.imgUrl" alt="{{}}" width="100px" height="50px">
            <div class="order-info">
              <div class="order-name">{{wuiou}}</div>
              <div class="order-orderNo">订单编号：{{ order.orderNo }}</div>
              <div v-if="order.orderStatus === '待使用'">
                <div>有效时间：{{order.haveTime}}</div>
              </div>
              <div v-else-if="order.orderStatus === '已使用'">
                <div>下单时间：{{ order.orderTime }}</div>
              </div>
              <div>数量：{{ 1 }}</div>
              <div>总价：¥{{ order.totalPrice }}元</div>
            </div>
            <div v-if="order.status === '已使用' && order.name === '千手足道·SPA'">
              <button>再来一单</button>
            </div>
            <div v-else-if="order.status === '已使用' && order.name === '亚duo酒店'">
              <button>再次预定</button>
            </div>
          </div>
        </div>
      </div>
    <!--    展示订单-->
<!--    <el-table-->
<!--        :data="tableData"-->
<!--        style="width: 100%">-->
<!--      <el-table-column-->
<!--          prop="orderId"-->
<!--          label="订单编号"-->
<!--          width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="userId"-->
<!--          label="用户编号"-->
<!--          width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="imgUrl"-->
<!--          label="头像">-->
<!--        <template slot-scope="scope">-->
<!--          <img :src="scope.row.imgUrl" alt="" style="width: 50px;height: 50px">-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
  <div v-loading="$loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"></div>
  </div>
</template>

<script>
const url='http://localhost:1000/'
export default {
  name: 'Order',
  data(){
    return {
      tableData:[],
    }
  },
  created(){
    this.findAll();
  },
  methods: {
    findAll(){
      this.axios.post(url+'order/findAll').then(res=>{
        this.tableData=res.data.data;
      })
    },
    findById(id){
      // this.axios.post(url+'order/findById?id='+id).then(res=>{
      //   console.log(res.data.data)
        this.$router.push({
          path:'/xq',
          query:{
            id:id
          }
        })
      // })
    }
  }
}
</script>

<style scoped>
.order-container {
  padding: 20px;
  text-align: center;
}
.dj{
  margin: 20px;
}
.dj:hover{
  color: blue;
}
.dj1{
  margin: 10px;
}

</style>